اموزش وردپرس

در اين مقاله قصد داريم تا در مورد رفع خطا Combine images using CSS sprites به شما كاربران عزيز آموزش بدهيم ، اگر شما كاربر عزيز در حال افزايش سرعت وب سايت خود هستيد و با اين خطا مواجه شده ايد ، با مطالعه اين مقاله مي توانيد با كمي تلاش اين خطا را نيز رفع كنيد ، تاثير انجام اين مقاله بر سرعت وب شما بسيار زياد است و باعث مي شود تعداد بسيار زيادي از درخواست هاي http شما كم شود ، ما قبلا در مورد كاهش تعداد درخواست HTTP در نت آرام مقاله ارسال كرديم ، لطفا ادامه اين مقاله را مطالعه نماييد.

منظور از CSS sprites چيست ؟
معمولا در هر صفحه وب از تعدادي عكس استفاده شده است ، براي دريافت هر عكس مرورگر مجبور است يك درخواست به سمت سرور ارسال كند ، رد و بدل اين درخواست ها توسط مرورگر و سرور نياز به زمان زيادي دارد ، در سال هاي گذشته براي رفع اين مشكل از روش CSS sprites استفاده شده است ، در اين روش با تركيب تمام تصاوير در يك عكس و درج مختصات آن در قسمت هاي مختلف با X و Y قسمت مورد نياز خود را در مكان خود قرار مي دهند ، در اين روش تنها يك درخواست براي يك تصوير به سرور ارسال مي شود و با انجام اين روش سرعت وب سايت بسيار بيشتر مي شود. به تصوير زير دقت كنيد :

ما در تصوير بالا حدود 50 تصوير را در يك عكس تركيب كرديم ، با در نظر گرفتن تعداد تصاوير تركيب شده ما بيشتر از 49 درخواست از وب سايت خود كم كرده ايم ، اين تعداد تاثير بسيار زيادي در سرعت سايت دارد.

چگونگي رفع خطا Combine images using CSS sprites در وردپرس :
متاسفانه در وردپرس هنوز افزونه خاصي براي sprite كردن css وجود ندارد ، در حال حاضر مطمئن ترين روش اعمال تغييرات در كد نويسي هاي وب سايت است ، بنابراين اگر آشنايي با html و css نداريد ، شايد بهتر باشد از طراح وب سايت خود درخواست كنيد تا اين تغييرات را براي شما انجام بدهد.

اگر تغييرات در css و درج مختصات براي شما دشوار است ، در ادامه بنده چندين ابزار آنلاين به شما معرفي مي كنم تا بتوانيد آنلاين عكس ها را با هم تركيب و خودكار كد هاي css آن را دريافت كنيد.

http://spritegen.website-performance.org/
http://css.spritegen.com/
https://instantsprite.com/
https://www.giftofspeed.com/sprite-generator/
همچنين اگر شما تمايل داريد CSS sprites را به صورت responsive ايجاد كنيد مي توانيد از لينك زير استفاده نماييد :

http://responsive-css.spritegen.com/

اميدواريم اين مقاله براي شما كاربر عزيز مفيد بوده باشد ، در صورتي كه سوال يا مشكلي در اين مورد داريد آن را در قسمت ديدگاه هاي اين سايت ارسال نماييد.

اشتراک گذاری:

ات مرتبط:

برچسب‌ها: